<template>
	<view class="guide-register-wrapper bg-primary full relative box flex column">
		<view class="relative flex-1 box w-100">
			<view class="absolute inset">
				<scroll-view class="full scroll-view" scroll-y>
					<view class="feedback-phone feedback-common">
						<view class="header">
							<text>您的姓名</text>
						</view>
						<view class="phone-wrap">
							<input v-model="username" type="text" placeholder="请输入姓名" class="mobile-input" />
						</view>
					</view>
					<view class="feedback-phone feedback-common">
						<view class="header">
							<text>手机号</text>
						</view>
						<view class="phone-wrap">
							<input v-model="mobile" type="tel" placeholder="请输入您的手机号" class="mobile-input" />
						</view>
					</view>
					<view class="feedback-phone feedback-common">
						<view class="header">
							<text>绑定城市</text>
						</view>
						<view class="phone-wrap">
							<!-- <input @click="chooseArea" disabled v-model="cityName" type="tel" placeholder="请选择城市"
								class="mobile-input" /> -->
							<text class="area-text" @click="chooseArea">{{ cityName || '请选择城市' }}</text>
						</view>
					</view>
					<view class="feedback-content feedback-common">
						<view class="header">
							<text>个人介绍</text>
						</view>
						<view class="textarea-wrap">
							<textarea class="textarea" placeholder="请输入内容" :maxlength="max"
								v-model="content"></textarea>
							<view class="textarea-footer">
								<text>{{ content.length }}/{{ max }}</text>
							</view>
						</view>
					</view>
					<view class="feedback-image feedback-common">
						<view class="header">
							<text>上传图片</text>
						</view>
						<view class="feedback-tip">
							<text>您的个人照片</text>
						</view>
						<view class="upload-list">
							<view @click="chooseImage">
								<view class="image-item" v-if="showImage">
									<image class="full" mode="aspectFill" :src="image"></image>
								</view>
								<view class="upload-btn" v-else>
									<image src="../static/upload-icon.png" class="upload-icon" mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
					</view>
					<view class="feedback-image feedback-common">
						<view class="header">
							<text>上传视频</text>
						</view>
						<view class="upload-list">
							<view class="video-item" v-if="showVideo">
								<video :src="video" class="video-target"></video>
								<view class="change-btn">
									<u-button text="删除" type="error" @click="removeVideo" />
								</view>
							</view>
							<view class="upload-btn" @click="chooseVideo" v-else>
								<image src="../static/upload-icon.png" class="upload-icon" mode="aspectFill">
								</image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="confirm-btn">
			<u-button :loading="loading" @click="confirmHandle" type="primary" :text="btnTitle" />
		</view>
	</view>
</template>

<script>
	import { uploadFile } from '@/utils/tool.js'
	import { mapGetters } from 'vuex'
	let evnetChannel = null
	const cityList = []
	export default {
		onLoad(ev) {
			uni.$on('uAvatarCropper', this.avatarCropperSuccess)
			if (!ev.hasOwnProperty('type')) {
				return this.type = 'add'
			}
			this.type = 'edit'
			if (!!evnetChannel) return
			evnetChannel = this.getOpenerEventChannel()
			evnetChannel.on('editInfo', this.editInfo)
		},
		onUnload() {
			uni.$off('uAvatarCropper', this.avatarCropperSuccess)
			if (!evnetChannel) return
			evnetChannel.off('editInfo', this.editInfo)
			evnetChannel = null
		},
		methods: {
			async avatarCropperSuccess(file) {
				const [error, resp] = await uploadFile(file)
				if (error) return this.$toast({ title: "上传失败,请重试" })
				const { uri } = resp
				this.image = uri
			},
			async initCityData(id) {
				const resp = await this.$request({
					url: "/index/getCityLists",
				})
				const { code, data, msg } = resp
				if (code !== 1) return this.$toast({ title: msg }, () => {
					uni.navigateBack()
				})
				if (!data.length) return
				const target = data.find(item => item.id === id)
				if (!target) return
				const { name } = target
				this.cityName = name
				this.cityId = id
			},
			editInfo(data) {
				const { coverImage, desc, image, name, video, mobile, cityId, } = data
				this.username = name
				this.content = desc
				this.mobile = mobile
				this.video = video
				this.image = image
				this.initCityData(cityId)
			},
			removeVideo() {
				uni.showModal({
					title: '删除提示',
					content: '您确定要删除这个视频吗?',
					success: ev => {
						if (ev.cancel) return
						this.video = ''
					}
				})
			},
			chooseArea() {
				const { lat, lng } = this.location
				uni.chooseLocation({
					latitude: lat,
					longitude: lng,
					success: async ev => {
						const { latitude, longitude } = ev
						const [error, cityData] = await this.$store.dispatch('location/getAddressByLocation', {
							lat: latitude,
							lng: longitude
						})
						if (error) return
						const { id, name } = cityData
						this.cityId = id
						this.cityName = name
						console.log(cityData, 'cityData');
					}
				})
			},
			chooseVideo() {
				uni.chooseVideo({
					success: async ev => {
						const { tempFilePath } = ev
						const [error, resp] = await uploadFile(tempFilePath, { isVideo: true })
						if (error) return this.$toast({ title: '上传失败' })
						const { uri } = resp
						this.video = uri
					}
				})
			},
			resetForm() {
				this.content = ''
				this.mobile = ''
				this.username = ''
				this.video = ''
				this.image = ''
				this.cityName = ''
				this.cityId = ''
			},
			// async editGuideInfo() {
			// 	const resp = await this.$request({
			// 		url: "/TourGuide/editTourGuide",
			// 		data: {},
			// 	})
			// },
			async confirmHandle() {
				if (this.loading) return
				const payload = this.validate()
				if (!payload) return
				this.loading = true
				uni.showLoading({
					title: '正在提交',
					mask: true
				})
				const url = this.type === 'add' ? '/TourGuide/addTourGuide' : '/TourGuide/editTourGuide'
				const resp = await this.$request({
					url,
					data: payload,
				})
				await this.$delay(300)
				const { code, msg } = resp
				uni.hideLoading()
				this.loading = false
				this.$toast({ title: msg })
				if (code !== 1) return
				this.resetForm()
				if (this.type !== 'add') {
					setTimeout(() => {
						evnetChannel.emit('updateData', true)
						uni.navigateBack()
					}, 1000)
				}
			},
			validate() {
				const {
					showImage,
					showVideo,
					video,
					image,
					username,
					mobile,
					content,
					activeTypeLabel,
					cityName,
					cityId
				} = this
				if (!username.length) return this.$toast({ title: '请输入您的姓名' })
				if (!mobile.length) return this.$toast({ title: "请输入您的联系方式" })
				if (!uni.$u.test.mobile(mobile)) return this.$toast({ title: "请输入正确的联系方式" })
				if (!this.cityName.length) return this.$toast({ title: '请选择城市' })
				if (!content.length) return this.$toast({ title: '请输入个人介绍' })
				if (!showImage) return this.$toast({ title: '请上传图片' })
				if (!showVideo) return this.$toast({ title: '请上传视频' })
				return {
					name: username,
					introduce: content,
					video,
					image,
					mobile,
					city_id: cityId
				}
			},
			chooseImage() {
				uni.navigateTo({
					url: `/pages-bundle/u-avatar-cropper/u-avatar-cropper?destWidth=500&rectWidth=300&fileType=jpg`
				})
				return

				uni.chooseImage({
					count: 1,
					success: async ev => {
						const { tempFilePaths } = ev
						if (!tempFilePaths.length) return
						const [file] = tempFilePaths
						const [error, resp] = await uploadFile(file)
						if (error) {
							return this.$toast({ title: "上传失败,请重试" })
						}
						const { uri } = resp
						this.image = uri
					}
				})
			},
			changeType(index) {
				if (this.activeType !== index) {
					this.activeType = index
				}
			},
		},
		computed: {
			...mapGetters(['location']),
			btnTitle() {
				if (this.type === 'add') return '提交申请'
				return '确认修改'
			},
			activeCity() {

			},
			showVideo() {
				return !!(this.video.length)
			},
			showImage() {
				const { image } = this
				return !!(image.length)
			},
		},
		data() {
			return {
				loading: false,
				image: '',
				username: '',
				content: '',
				max: 500,
				mobile: '',
				video: '',
				areaOption: [],
				cityId: '',
				cityName: '',
				type: 'add',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guide-register-wrapper {
		padding: 0 0 env(safe-area-inset-bottom);

		.scroll-view {
			padding-top: 24rpx;
			box-sizing: border-box;
		}

		.confirm-btn {
			margin-top: 24rpx;
			padding: 0 32rpx;
			box-sizing: border-box;

			::v-deep button {
				height: 80rpx;
				background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: none;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);

			}
		}

		.feedback-phone {
			margin-top: 16rpx;

			.phone-wrap {
				margin-top: 24rpx;
				display: flex;

				.area-text {
					font-size: 28rpx;
					color: #999;
					padding: 0 16rpx;
					border: 2rpx solid rgba(0, 0, 0, 0.26);
					width: 100%;
					height: 68rpx;
					display: flex;
					align-items: center;
					box-sizing: border-box;
				}

				.mobile-input {
					display: block;
					width: 100%;
					height: 68rpx;
					background: #FFFFFF;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.26);
					border: 2rpx solid rgba(0, 0, 0, 0.26);
					padding: 10rpx 16rpx;
					box-sizing: border-box;
				}
			}
		}

		.feedback-image {
			margin-top: 16rpx;

			.upload-list {
				display: flex;
				align-items: center;
				flex-flow: row wrap;
				margin-top: 24rpx;

				.video-item {
					width: 100%;

					.change-btn {
						padding: 16rpx 0;
					}

					.video-target {
						width: 100%;
						height: 100%;
						height: 420rpx;
					}

				}

				.image-item {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 0;
					overflow: hidden;
				}

				.upload-btn {
					width: 160rpx;
					height: 160rpx;
					background: #F3F3F3;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.upload-icon {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.feedback-tip {
				height: 40rpx;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.4);
				margin-top: 8rpx;
				line-height: 40rpx;
			}
		}

		.feedback-common {
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #FFFFFF;

			.header {
				height: 44rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);
				font-weight: bold;
				line-height: 44rpx;
			}
		}

		.feedback-content {
			margin-top: 16rpx;
			position: relative;

			.textarea-wrap {
				margin-top: 50rpx;

				.textarea-footer {
					margin-top: 16rpx;
					display: flex;
					justify-content: flex-end;
					height: 40rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
					line-height: 40rpx;
				}

				.textarea {
					display: block;
					width: 100%;
					height: 192rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
					line-height: 40rpx;
				}
			}

			&::after {
				content: "";
				display: block;
				position: absolute;
				left: 32rpx;
				right: 0;
				top: 94rpx;
				height: 1px;
				background-color: #E7E7E7;
			}

		}

		.feedback-type {

			.type-list {
				margin-top: 24rpx;
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;

				.type-item {
					width: 132rpx;
					height: 60rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					border: 2rpx solid rgba(0, 0, 0, 0.4);
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgba(0, 0, 0, 0.6);
					font-size: 24rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					overflow: hidden;

					&.active {
						background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
						color: rgba(0, 0, 0, 0.9);
						border-color: #8BDCFF;
					}
				}
			}
		}
	}
</style>